@extends('home.layout')

@section('header_class', 'site-header view-header')

@section('add_script')
{{--    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>--}}
{{--    <script>var CaptchaAppId = "{{config('blog.tencent_captcha_id')}}";</script>--}}
@endsection

@section('content')
    <section class="layui-col-md12">
        <article class="post">
            <div class="post-container">
                <div class="post-header">
                    <h1 class="post-title">
                        <a href="{{ $article->url }}">{{ $article->title }}</a>
                    </h1>
                    <div class="post-byline">
                        发布于
                        <a class="date" href="{{ date('/Y/m', $article->published_at) }}">{{ date('Y年n月j日', $article->published_at) }}</a>
                    </div>
                </div>
                <div class="post-content">
                    @if ($article->is_original)
                        <div class="copyright">
                            <ul>
                                <li>本文地址: <a href="{{ $article->url }}" title="{{ $article->title }}">{{ config('app.url') }}{{ $article->url }}</a></li>
                                <li>转载请注明出处</li>
                            </ul>
                        </div>
                    @endif
                    {!! $article->content !!}
                    @if ($relatedArticles->isNotEmpty())
                        <div class="related-posts">
                            <h3>相关文章</h3>
                            <ul>
                                @foreach ($relatedArticles as $item)
                                    <li><a href="{{ $item->url }}">{{ $item->title }}</a></li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                </div>
                <div class="post-meta">
                    <div class="post-categories">
                        <span>分类至</span>
                        <a href="/category/{{ $article->category->alias }}">{{ $article->category->name }}</a>
                    </div>
                    @if ($article->tags)
                        <div class="post-tags">
                            <ul>
                                @foreach (explode(',', $article->tags) as $tag)
                                    <li><a href="/tag/{!! urlencode($tag) !!}">{{ $tag }}</a></li>
                                @endforeach
                            </ul>
                        </div>
                    @endif
                    <nav class="further-reading">
                        <div class="previous">
                            <span>上一篇</span>
                            @if ($prevArticle = $article->getPrev())
                                <a href="{{ $prevArticle->url }}" rel="prev">{{ $prevArticle->title }}</a>
                            @else
                                <a href="/">返回首页</a>
                            @endif
                        </div>
                        <div class="next">
                            <span>下一篇</span>
                            @if ($nextArticle = $article->getNext())
                                <a href="{{ $nextArticle->url }}" rel="next">{{ $nextArticle->title }}</a>
                            @else
                                <a href="/">返回首页</a>
                            @endif
                        </div>
                    </nav>
                </div>
            </div>
        </article>
        <div class="comment-container">
            <section id="comments">
                @if (!$article->show_comment)
                    <div class="comment-number">
                        <h2>评论功能已关闭。</h2>
                    </div>
                @else
                    <div class="comment-number">
                        @if ($article->comments->isNotEmpty())
                            <h2>共 {{ $article->comments->count() }} 条评论</h2>
                        @else
                            <h2>快来评论一下吧！</h2>
                        @endif
                    </div>
                    @if ($article->comments->isNotEmpty())
                        <ol class="comment-list">
                            @foreach ($article->comments as $comment)
                                <li class="pingback" id="comment-{{ $comment->id }}">
                                    <article class="comment">
                                        <div class="comment-author">
                                            <img src="/static/img/avatar{{ $comment->avatar }}.jpg" class="avatar">
                                            <div class="comment-meta">
                                                <span class="author-name">
                                                    <a href="{{ $comment->url ?: 'javascript:;' }}" rel="external nofollow" class="url" target="_blank">{{ $comment->name }}</a>
                                                </span>
                                                <span class="comment-date">{{ $comment->created_at->format('Y-m-d') }}</span>
                                            </div>
                                        </div>
                                        <div class="comment-content">
                                            <p>{!! nl2br(htmlspecialchars($comment->content)) !!}</p>
                                            @if ($comment->reply_content)
                                                <div class="master-reply">
                                                    <p class="master-meta">博主回复：</p>
                                                    {!! $comment->reply_content !!}
                                                </div>
                                            @endif
                                        </div>
                                        {{--<div class="comment-footer">
                                            <i class="fa fa-reply"></i><a rel="nofollow" class="comment-reply-link" href="#respond">Reply</a>
                                        </div>--}}
                                    </article>
                                </li>
                            @endforeach
                        </ol>
                    @endif
                    <div class="comment-respond">
                        <h3 class="comment-reply-title">发表评论</h3>
                        <form id="comment-form">
                            <input type="hidden" name="article_id" value="{{ $article->id }}"/>
                            <p class="comment-notes">必填项已用 * 标注，您的邮箱地址不会被公开，博主可能会通过邮件联系您。</p>
                            <p class="comment-form-content">
                                <label>评论内容*</label>
                                <textarea name="content" placeholder="请输入至少5个字的内容" rows="8" class="layui-textarea" maxlength="500"></textarea>
                            </p>
                            <p class="comment-form-name">
                                <label>您的名字*</label>
                                <input type="text" name="name" placeholder="张三" class="layui-input" maxlength="20"/>
                            </p>
                            <p class="comment-form-email">
                                <label>您的邮箱*</label>
                                <input type="email" name="email" placeholder="name@example.com" class="layui-input" maxlength="50"/>
                            </p>
                            <p class="comment-form-url">
                                <label>您的主页</label>
                                <input type="url" name="url" placeholder="http://www.example.com" class="layui-input" maxlength="50"/>
                            </p>
                            <p class="comment-form-avatar">
                                <label>选择头像*</label>
                                <span>
                                    <label class="checked"><input type="radio" name="avatar" checked value="1"><img src="/static/img/avatar1.jpg"/><i class="layui-icon layui-icon-ok"></i></label>
                                    <label><input type="radio" name="avatar" value="2"><img src="/static/img/avatar2.jpg"/><i class="layui-icon layui-icon-ok"></i></label>
                                    <label><input type="radio" name="avatar" value="3"><img src="/static/img/avatar3.jpg"/><i class="layui-icon layui-icon-ok"></i></label>
                                    <label><input type="radio" name="avatar" value="4"><img src="/static/img/avatar4.jpg"/><i class="layui-icon layui-icon-ok"></i></label>
                                    <label><input type="radio" name="avatar" value="5"><img src="/static/img/avatar5.jpg"/><i class="layui-icon layui-icon-ok"></i></label>
                                    <label><input type="radio" name="avatar" value="6"><img src="/static/img/avatar6.jpg"/><i class="layui-icon layui-icon-ok"></i></label>
                                    <label><input type="radio" name="avatar" value="7"><img src="/static/img/avatar7.jpg"/><i class="layui-icon layui-icon-ok"></i></label>
                                    <label><input type="radio" name="avatar" value="8"><img src="/static/img/avatar8.jpg"/><i class="layui-icon layui-icon-ok"></i></label>
                                </span>
                            </p>
                            <p class="comment-form-btn">
                                <button type="submit" class="layui-btn layui-btn-primary">提交评论</button>
                            </p>
                        </form>
                    </div>
                @endif
            </section>
        </div>
    </section>
@endsection
